<template>
  <view class="container">
    <view class="form-item">
      <view class="label">食品名称：</view>
      <input class="input-field" type="text" v-model="caloriesFoodUser.foodName" placeholder="请输入食品名称" />
    </view>
    <view class="form-item">
      <view class="label">数	量：</view>
      <input class="input-field" type="number" v-model="caloriesFoodUser.quantity" placeholder="如:1、100" />
    </view>
    <view class="form-item">
      <view class="label">单	位：</view>
      <input class="input-field" type="text" v-model="caloriesFoodUser.unit" placeholder="如:克、盘、盒" />
    </view>
    <view class="form-item">
      <view class="label">热	量：</view>
      <input class="input-field" type="number" v-model="caloriesFoodUser.calorie" placeholder="请输入多少千卡" />
    </view>
    <u-button @click="submit()" hover-class="none" >提交</u-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
		caloriesFoodUser: {
					foodName: '',
					quantity: '',
					unit: '',
					calorie: ''
					},
      
    };
  },
  onLoad() {
  	const {hostname} = this.$store.state.moduleCommon;
  	const {urlImg} = this.$store.state.moduleCommon;
  	this.urlHeat3 = hostname;
  	this.urlHeat = urlImg + "/";
  },
  methods: {
    submit() {
      // 在这里编写提交表单的逻辑
	  if (
	    this.caloriesFoodUser.foodName === '' ||
	    this.caloriesFoodUser.quantity === '' ||
	    this.caloriesFoodUser.unit=== '' ||
	    this.caloriesFoodUser.calorie === ''
	  ) {
	    uni.showToast({
	      title: '请填写完整信息',
	      icon: 'none'
	    });
	    return;
	  }
      console.log('表单已提交');
	  uni.request({
	  	url: this.urlHeat3 + "/api/Calories/add/customize_foods", //
	  	method: "POST",
	  	data:this.caloriesFoodUser,
	  	header: {
	  		'Content-Type': 'application/json',
	  		'Authorization': 'Bearer ' + uni.getStorageSync("Authorization")
	  	},
	  	success: (res) => {
	  		uni.reLaunch({
	  			url: '/pages/add/add'
	  		});
	  	},
	  });
    }
  }
};
</script>

<style lang="scss">
.container {
  padding: 20rpx;
}

.form-item {
  display: flex;
  margin-bottom: 20rpx;
  align-items: center;
}

.label {
  width: 150rpx;
  font-size: 30rpx;
  color: #333;
}

.input-field {
  flex: 1;
  padding: 8rpx;
  border: 1px solid #ccc;
  border-radius: 4rpx;
  font-size: 30rpx;
}


</style>